import { TableComponent } from './../table.component';
import { Component, ElementRef, ContentChild, AfterContentInit, Input, TemplateRef } from '@angular/core';



@Component({
  selector: 'el-table-column',
  templateUrl: './table-column.component.html',
})
export class TableColumnComponent implements AfterContentInit {
  private root: any;
  private el: any;
  @ContentChild('slot') slot!: TemplateRef<any>;
  @Input() prop: string = '';
  @Input() renderHTML: boolean = false;
  @Input() label: string = '';
  @Input() width: string | number = 'auto';
  private maxDeep: any = 10;
  constructor(root: TableComponent, el: ElementRef) {
    this.root = root;
    this.el = el;
  }

  ngAfterContentInit(): void {
    var /** @type {?} */ self = this.el.nativeElement;
        var /** @type {?} */ brothers = self.parentElement.children;
        var /** @type {?} */ deep = this.findDeep(self);
        var /** @type {?} */ level = deep === 0 && brothers.length > 1 ? this.findLevel(self) : deep;
        var /** @type {?} */ childCount = this.findChild(self);
       
    
        var /** @type {?} */ tableColumn = {
            prop: this.prop,
            label: this.label ? this.label : this.prop,
            width: this.width,
            slot: this.slot,
            _renderHTML: this.renderHTML,
            deep: deep, level: level, childCount: childCount,
        };
        this.root.updateColumns(tableColumn);

        if (deep === 0) {
            this.root.updateColumnsWidth({ auto: false, width: +this.width });
        }
        // last element
        if (this.isLastElement(deep, self)) {
            this.root.transformColumnsData();
        }
        
        
  }
  

  findChild(self:any) {
    var /** @type {?} */ children = self.children;
        if (!children || !children.length)
            return 0;
        return Array.from(children)
            .map(function (child:any) {
            return child.tagName.toUpperCase() === 'EL-TABLE-COLUMN';
        }).filter(function (r) { return r; }).length;
  }

  findLevel(self:any){
    var _this = this;
        var /** @type {?} */ brothers = self.parentElement.children;
        var /** @type {?} */ brothersDeeps = Array.from(brothers).map(function (el) { return _this.findDeep(el); });
        var /** @type {?} */ maxDeep = brothersDeeps.sort(function (pre, next) { return next - pre; })[0];
        return maxDeep;
  }

  findDeep(self:any){
    var /** @type {?} */ deep = 0;
        Array.from(new Array(this.maxDeep)).every( ()=> {
            var /** @type {?} */ children = self.children;
            if (!children || !children.length)
                return false;
            if (children[0].tagName.toUpperCase() !== 'EL-TABLE-COLUMN') {
                return false;
            }
            self = children[0];
            deep++;
            return ;
        });
        return deep;
  }


  isLastElement(deep:any, self:any){
    if (deep !== 0)
            return false;
        var /** @type {?} */ isLast = true;
        Array.from(new Array(this.maxDeep)).every(function () {
            var /** @type {?} */ parent = self.parentElement;
            if (!parent)
                return false;
            if (self !== parent.children[parent.children.length - 1]) {
                isLast = false;
                return false;
            }
            if (parent.tagName.toUpperCase() !== 'EL-TABLE-COLUMN') {
                return false;
            }
            self = parent;
            return true;
        });
        return isLast;
  }
}
